<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 箭头函数this指向
    var age = 100
    const obj = {
      age: 20,
      say: () => {
        console.log(this.age)
      }
    }
    obj.say()
  </script>
  <script>
    // 模板字符串可以换行
    const spanText = '大聪明'
    const htmlStr = `
      <div>
        <span>${spanText}</span>
      </div>
    `
    console.log(htmlStr)
    /**
     * <div>
     *  <span>大聪明</span>
     * </div>
     */

    // 模板字符串中可以调用函数
    const fn = function () {
      return 'fn'
    }
    console.log(`模板字符串调用了${fn()}函数`) // 模板字符串调用了fn函数

    // startsWith endsWith
    const str = 'Hello World!'
    console.log(str.startsWith('He')) // true
    console.log(str.endsWith('！')) // false

    // Set
    const s1 = new Set([1, 2, 3])
    console.log(s1.size) // 3

    // Set数组去重
    const arr = [1, 1, 2, 2, 3, 3]
    const setArr = [...new Set(arr)]
    console.log(setArr) // [1, 2, 3]

    // Set实例方法
    const s2 = new Set()
    s2.add('a').add('b')
    console.log(s2.size) // 2
    s2.delete('b')
    console.log(s2.has('b')) // false
    s2.clear()

    // Set遍历
    const s3 = new Set([1, 2, 3])
    s3.forEach((value, key, set) => {
      console.log(value, key, set)
      // 1 1 Set(3) { 1, 2, 3 }
      // 68 2 2 Set(3) { 1, 2, 3 }
      // 68 3 3 Set(3) { 1, 2, 3 }
    })
  </script>
  <script>
    // Promise
    const promise = new Promise((resolve, reject) => {
      // 接口1
      setTimeout(() => {
        resolve('a')
      }, 1000)
    })
    promise.then((res) => {
      console.log(res)
      if (res === 'a') {
        return new Promise((resolve, reject) => {
          // 接口2
          setTimeout(() => {
            resolve('b')
          }, 1000)
        })
      }
    }).then((res) => {
      console.log(res)
      if (res === 'b') {
        return new Promise((resolve, reject) => {
          // 接口3
          setTimeout(() => {
            resolve('c')
          }, 1000)
        })
      }
    }).then(res => {
      console.log(res)
    })
  </script>
</body>

</html>